<template>
  <div id="detail">
    <detail-nav-bar
      @routerBack="back"
      @detailNavClick="navClick"
      ref="navBarDetail"
    ></detail-nav-bar>
    <scroll class="content" ref="detailScroll" :probeTypes="3">
      <detail-swiper :images="topImages"></detail-swiper>
      <detail-base :itemInfo="itemInfo" :result="result"></detail-base>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-item :detailInfo="result.detailInfo"></detail-goods-item>
      <item-table
        :itemParams="result.itemParams"
        class="itemParams"
        ref="itemParamsY"
      ></item-table>
      <detail-rate :rate="result.rate" ref="rateTopY"></detail-rate>
      <detail-recommend
        :good="recommend"
        ref="recommendTopY"
      ></detail-recommend>
    </scroll>
    <detail-buttom-bar @addToCart="buttomClick"></detail-buttom-bar>
    <back-top
      class="back-top"
      @click.native="topClick"
      v-show="hide"
    ></back-top>
  </div>
</template>

<script>
import detailNavBar from "./detailComponent/detailNavBar.vue";
import detailSwiper from "./detailComponent/detailSwiper.vue";
import detailShopInfo from "./detailComponent/detailShopInfo.vue";
import detailBase from "./detailComponent/detailBase.vue";
import detailGoodsItem from "./detailComponent/detailGoodsItem.vue";
import itemTable from "./detailComponent/detailTable.vue";
import detailRate from "./detailComponent/detailRate.vue";
import detailRecommend from "./detailComponent/detailRecommend.vue";
import detailButtomBar from "./detailComponent/detailbuttomBar.vue";

import backTop from "components/content/backTop.vue";
import scroll from "components/common/scroll.vue";

import { Getdetail, getRecommend } from "network/detail.js";

import { mapGetters } from "vuex";

export default {
  name: "Detail",
  components: {
    detailNavBar,
    detailSwiper,
    detailShopInfo,
    detailBase,
    scroll,
    detailGoodsItem,
    backTop,
    itemTable,
    detailRate,
    detailRecommend,
    detailButtomBar,
  },
  data() {
    return {
      id: null,
      topImages: null,
      itemInfo: null,
      result: null,
      recommend: null,
      shop: {
        logo: null,
        name: null,
        fans: null,
        sells: null,
        score: null,
        goodscount: null,
      },
      detailY: [],
    };
  },
  created() {
    this.$store.commit("navhide", false);
    this.id = this.$route.params.id;
    Getdetail(this.id).then((res) => {
      this.result = res.result;
      this.topImages = res.result.itemInfo.topImages;
      this.itemInfo = res.result.itemInfo;
      this.shop.logo = res.result.shopInfo.shopLogo;
      this.shop.name = res.result.shopInfo.name;
      this.shop.fans = res.result.shopInfo.cFans;
      this.shop.sells = res.result.shopInfo.cSells;
      this.shop.goodscount = res.result.shopInfo.cGoods;
      this.shop.score = res.result.shopInfo.score;
    });
    getRecommend().then((res) => {
      this.recommend = res.data.list;
    });
  },
  mounted() {
    this.$bus.$on("detailItemImageLoad", () => {
      clearTimeout(this.clear1);
      this.clear1 = setTimeout(() => {
        this.$refs.detailScroll &&
          this.$refs.detailScroll.scroll &&
          this.$refs.detailScroll.scroll.refresh();
      }, 500);
    });
    this.$bus.$on("detailload", () => {
      clearTimeout(this.clear1);
      this.clear1 = setTimeout(() => {
        this.$refs.detailScroll &&
          this.$refs.detailScroll.scroll &&
          this.$refs.detailScroll.scroll.refresh();
      }, 500);
    });
    this.$bus.$on("detailItemImageLoad", () => {
      clearTimeout(this.clear1);
      this.clear1 = setTimeout(() => {
        this.$refs.detailScroll &&
          this.$refs.detailScroll.scroll &&
          this.$refs.detailScroll.scroll.refresh();
      }, 500);
    });
  },
  updated() {
    this.detailY = [];
    this.detailY.push(0);
    this.detailY.push(this.$refs.itemParamsY.$el.offsetTop);
    this.detailY.push(this.$refs.rateTopY.$el.offsetTop);
    this.detailY.push(this.$refs.recommendTopY.$el.offsetTop);
    this.contentScrol();
  },
  destroyed() {
    this.$store.commit("navhide", true);
  },

  computed: {
    ...mapGetters(["hide"]),
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    topClick() {
      this.$refs.detailScroll.scroll &&
        this.$refs.detailScroll.scroll.scrollTo(0, 0, 1000);
    },
    navClick(index) {
      this.$refs.detailScroll.scroll &&
        this.$refs.detailScroll.scroll.scrollTo(0, -this.detailY[index], 300);
    },
    contentScrol() {
      if (
        this.$store.state.position >= 0 &&
        this.$store.state.position < this.detailY[1]
      ) {
        this.$refs.navBarDetail.$children[0].$children[0].itemIndex = 0;
      } else if (
        this.$store.state.position >= this.detailY[1] &&
        this.$store.state.position < this.detailY[2]
      ) {
        this.$refs.navBarDetail.$children[0].$children[0].itemIndex = 1;
      } else if (
        this.$store.state.position >= this.detailY[2] &&
        this.$store.state.position < this.detailY[3]
      ) {
        this.$refs.navBarDetail.$children[0].$children[0].itemIndex = 2;
      } else {
        this.$refs.navBarDetail.$children[0].$children[0].itemIndex = 3;
      }
    },
    buttomClick() {
      let message = {};
      message["desc"] = this.result.itemInfo.desc;
      message["price"] = this.itemInfo.lowNowPrice;
      message["image"] = this.topImages[0];
      message["title"] = this.itemInfo.title;
      message["iid"] = this.id;
      message["count"] = 1;
      message["check"] = false;
      this.$store.commit("add", message);
    },
  },
};
</script>

<style scoped>
.content {
  position: absolute;
  overflow: hidden;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.back-top {
  position: fixed;
  bottom: 60px;
  right: 10px;
}
.itemParams {
  border-top: 5px solid rgb(109, 107, 107, 0.1);
}
</style>
